<div>
  <p-dataTable [value]="cars" expandableRows="true">
    <p-column expander="true" styleClass="col-icon"></p-column>
    <p-column field="vin" header="Vin"></p-column>
    <p-column field="year" header="Year"></p-column>
    <p-column field="brand" header="Brand"></p-column>
    <p-column field="color" header="Color"></p-column>
    <ng-template let-car pTemplate="rowexpansion">
      <div class="ui-grid ui-grid-responsive ui-fluid" style="font-size:16px;padding:20px">
        <div class="ui-grid-row">
          <div class="ui-grid-col-3" style="text-align:center">
            <i class="fa fa-search" (click)="showCar(car)" style="cursor:pointer;float:left;margin-top:40px"></i>
            <img src="assets/showcase/images/demo/car/{{car.brand}}.png">
          </div>
          <div class="ui-grid-col-9">
            <div class="ui-grid ui-grid-responsive ui-grid-pad">
              <div class="ui-grid-row">
                <div class="ui-grid-col-2 label">Vin: </div>
                <div class="ui-grid-col-10">{{car.vin}}</div>
              </div>
              <div class="ui-grid-row">
                <div class="ui-grid-col-2 label">Year: </div>
                <div class="ui-grid-col-10">{{car.year}}</div>
              </div>
              <div class="ui-grid-row">
                <div class="ui-grid-col-2 label">Brand: </div>
                <div class="ui-grid-col-10">{{car.brand}}</div>
              </div>
              <div class="ui-grid-row">
                <div class="ui-grid-col-2 label">Color: </div>
                <div class="ui-grid-col-10">{{car.color}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </ng-template>
  </p-dataTable>

  <p-dialog header="Car Details" [(visible)]="dialogVisible" [responsive]="true" showEffect="fade" [modal]="true" width="250">
    <div class="ui-grid ui-grid-responsive ui-grid-pad" *ngIf="selectedCar">
      <div class="ui-grid-row">
        <div class="ui-grid-col-4">
          <label for="vin" class="label">Vin</label>
        </div>
        <div class="ui-grid-col-8">{{selectedCar.vin}}</div>
      </div>
      <div class="ui-grid-row">
        <div class="ui-grid-col-4">
          <label for="brand" class="label">Year</label>
        </div>
        <div class="ui-grid-col-8">{{selectedCar.year}}</div>
      </div>
      <div class="ui-grid-row">
        <div class="ui-grid-col-4">
          <label for="brand" class="label">Brand</label>
        </div>
        <div class="ui-grid-col-8">{{selectedCar.brand}}</div>
      </div>
      <div class="ui-grid-row">
        <div class="ui-grid-col-4">
          <label for="color" class="label">Color</label>
        </div>
        <div class="ui-grid-col-8">{{selectedCar.color}}</div>
      </div>
    </div>
  </p-dialog>
</div>
